<template>
	<view class="longbingbing-industry-coach-item">
		<view @tap.stop="goTechInfo" class="industry-list-item fill-base">
			<view class="item-img rel">
				<!-- #ifdef H5 -->
				<view class="item-img radius">
					<view class="h5-image item-img radius" :style="{ backgroundImage : `url('${info.work_img}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" class="item-img radius" :src="info.work_img">
				</image>
				<!-- #endif -->
				<view class="abs item-time-order flex-between f-icontext c-base pl-md pr-md">
					<view class="flex-y-center">
						<i class="iconfont iconjuli1" style="margin-right: 6rpx;"></i>
						<view>{{info.distance}}</view>
					</view>
					<view class="flex-y-center"><i class="iconfont"
							:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
							:style="{color:info.is_collect ? primaryColor :''}"></i>
					</view>
				</view>
			</view>
			<view class="pd-md">
				<view class="flex-between">
					<view class="f-desc c-title text-bold max-100 ellipsis">{{info.coach_name}}</view>
					<view class="can-service-btn flex-center f-icontext rel" v-if="info.near_time">
						<view class="bg abs" :style="{background:primaryColor}"></view>
						<view class="f-icontext c-base text rel text-center" :style="{background:primaryColor}">最早可约
						</view>
						<view class="f-icontext near-time" :style="{color:primaryColor}">{{info.near_time}}</view>
					</view>
				</view>
				<view class="flex-between mt-sm">
					<view class="flex-y-center f-icontext" style="color:#656565">
						<block v-if="merchant_switch_show && info.admin_id && info.merchant_name">
							<i class="iconfont iconshangjia_1 c-caption"></i>
							<view class="ellipsis" style="max-width: 130rpx;">{{info.merchant_name}}</view>
						</block>
						<block v-else-if="plugAuth.store && info.store && info.store.id">
							<i class="iconfont icondianpu c-caption"></i>
							<view class="ellipsis" style="max-width: 130rpx;">{{info.store.title}}</view>
						</block>
						<block v-else>
							<i class="iconfont iconshangjia_1 c-caption"></i>
							商家
						</block>
					</view>
					<view class="item-tag f-icontext flex-center" v-if="info.station_icon_name">
						{{info.station_icon_name}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {}
		},
		computed: mapState({
			plugAuth: state => state.config.configInfo.plugAuth,
			merchant_switch_show: state => state.config.configInfo.merchant_switch_show,
		}),
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			// 技-师详情
			async goInfo() {
				let {
					id,
					store = {},
					admin_id = 0,
					merchant_name
				} = this.info
				let {
					merchant_switch_show,
					plugAuth = {},
				} = this

				let isCheck = false
				// let url = `/user/pages/technician-info?id=${id}`
				let url = `/userA/pages/worker-data?id=${id}`
				if (merchant_switch_show && admin_id && merchant_name) {
					url = `/user/pages/merchant-info?id=${admin_id}`
				} else if (plugAuth.store && store && store.id) {
					url = `/shopstore/pages/detail?id=${store.id}`
				} else {
					isCheck = true
				}
				if (isCheck) {
					let check = await this.$util.toCheck()
					if (!check) return
				}
				this.$util.goUrl({
					url
				})
			},
			async goTechInfo() {
				let {
					id
				} = this.info
				let check = await this.$util.toCheck()
				if (!check) return
				this.$util.goUrl({
					url: `/user/pages/technician-info?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.longbingbing-industry-coach-item {

		.industry-list-item {
			width: 345rpx;
			border-radius: 12rpx 12rpx 16rpx 16rpx;
			overflow: hidden;

			.item-img {
				width: 100%;
				height: 324rpx;
				/* #ifdef H5 */
				object-fit: cover;
				/* #endif */
				border-radius: 12rpx 12rpx 0 0;
			}


			.item-time-order {
				left: 0;
				bottom: 0;
				width: 100%;
				height: 83rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

				.text {
					transform: scale(0.8);
				}
			}

			.can-service-btn {
				height: 28rpx;
				border-radius: 6rpx;

				.bg {
					opacity: 0.1;
					border-radius: 6rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}

				.text {
					width: 100rpx;
					height: 28rpx;
					top: 0;
					left: 0;
					z-index: 2;
					border-radius: 4rpx 0 0 4rpx;
					line-height: 28rpx;
				}

				.near-time {
					padding: 0 6rpx;
					line-height: 28rpx;
				}
			}


			.item-tag {
				min-width: 88rpx;
				height: 30rpx;
				padding: 0 10rpx;
				color: #FF3300;
				background: #FFEEEB;
				border-radius: 4rpx;
			}

			.iconfont {
				font-size: 28rpx;
			}

			.iconshangjia_1,
			.icondianpu {
				margin-right: 8rpx;
			}
		}

	}
</style>